<template>
  <div class="echartsBox" ref="echartsBox"></div>
</template>

<script>
const elementResizeDetectorMaker = require("element-resize-detector");
export default {
  mounted() {
    this.$nextTick(() => {
      /* 重新渲染图表 */
      this.drawLine();
      let erd = elementResizeDetectorMaker();
      erd.listenTo(this.$refs.echartsBox, (ele) => {
        this.drawLine();
      });
    });
  },
  data() {
    return {
      theme: this.json.theme, //主题颜色
    };
  },
  watch: {
    data: "drawLine", // 数值变化是更新图表
  },
  props: {
    //父组件传入的数据
    data: {
      type: Array | Object,
      default: () => [],
    },
  },
  methods: {
    //渲染echarts
    drawLine() {
      try {
        let that = this;
        let myChart = this.$echarts.init(this.$refs.echartsBox);
        let color = this.json.theme.echartsBackgroundColor;
        let json = this.data;
        let echartData = json.list;
        var length = Object.keys(json.list[0]).length - 1;
        let xAxisData = echartData.map((v) => v.name);
        const hexToRgba = (hex, opacity) => {
          let rgbaColor = "";
          let reg = /^#[\da-f]{6}$/i;
          if (reg.test(hex)) {
            rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
              "0x" + hex.slice(3, 5)
            )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
          }
          return rgbaColor;
        };
        var series = [];
        for (let j = 0; j < length; j++) {
          var obj = {
            name: json.legend[j],
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[0],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[0], 0.5),
                shadowOffsetY: 8,
              },
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: hexToRgba(color[0], 0.3),
                    },
                    {
                      offset: 1,
                      color: hexToRgba(color[0], 0.1),
                    },
                  ],
                  false
                ),
                shadowColor: hexToRgba(color[0], 0.1),
                shadowBlur: 10,
              },
            },
            data: echartData.map((v) => v["value" + (j + 1).toString()]),
          };
          series.push(obj);
        }
        // //  ["1", "2", "3", "4", "5", "6", "7", "8"]
        // let yAxisData1 = echartData.map((v) => v.value1);
        // // [100, 138, 350, 173, 180, 150, 180, 230]
        // let yAxisData2 = echartData.map((v) => v.value2);
        // // [233, 233, 200, 180, 199, 233, 210, 180]

        let option = {
          color: color,
          legend: {
            top: 10,
            left: "center",
            itemWidth: 10,
            itemHeight: 10,
            // padding: [5, 10],
            textStyle: {
              fontSize: 14,
              color: this.json.theme.echartsBackgroundColor[0],
              padding: [3, 0, 0, 0],
            },
          },
          tooltip: {
            trigger: "axis",
            // formatter: function (params) {
            //   let html = "";
            //   params.forEach((v) => {
            //     html += `<div style="color: rgba(4, 162, 253, 1);font-size: 14px;line-height: 24px">
            //     <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
            //       color[v.componentIndex]
            //     };"></span>
            //     ${v.seriesName}.${v.name}
            //     <span style="color:${
            //       color[v.componentIndex]
            //     };font-weight:700;font-size: 18px">${v.value}</span>
            //     万元`;
            //   });

            //   return html;
            // },
            // extraCssText:
            //   "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
            // axisPointer: {
            //   type: "shadow",
            //   shadowStyle: {
            //     color: "#ffffff",
            //     shadowColor: "rgba(225,225,225,1)",
            //     shadowBlur: 5,
            //   },
            // },
          },
          grid: {
            // top: 100,
            top: "17%",
            left: "5%",
            right: "7%",
            bottom: "6%",
            containLabel: true,
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              axisLabel: {
                formatter: "{value}",
                textStyle: {
                  color: this.json.theme.echartsBackgroundColor[0],
                },
              },
              axisLine: {
                lineStyle: {
                  color: this.json.theme.echartsBackgroundColor[0],
                },
              },
              data: xAxisData,
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "单位：万千瓦时",
              axisLabel: {
                textStyle: {
                  color: this.json.theme.echartsBackgroundColor[0],
                },
              },
              nameTextStyle: {
                color: this.json.theme.echartsBackgroundColor[0],
                fontSize: 12,
                lineHeight: 40,
              },
              splitLine: {
                lineStyle: {
                  type: "dashed",
                  color: "#E9E9E9",
                },
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: this.json.theme.echartsBackgroundColor[0],
                  width: 1,
                  type: "solid",
                },
              },
              axisTick: {
                show: false,
              },
            },
          ],
          series: series,
        };
        myChart.setOption(option);
        myChart.off("click");
        myChart.resize();
        /* 点击事件 */
        myChart.on("click", (params) => {});
        /* 大小自适应 */
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      } catch (err) {
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.echartsBox {
  width: 100%;
  height: 100%;
}
</style>
>
